<template>
    <div>
       <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>导演管理</el-breadcrumb-item>
            <el-breadcrumb-item>新增导演</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-form ref="form" :model="form" :rules='rules' label-width="80px">
        <el-form-item label="演员姓名" prop="directorName">
            <el-input v-model="form.directorName"></el-input>
        </el-form-item>
        <el-form-item label="演员头像" prop="directorAvatar">
            <el-upload
        class="avatar-uploader"
        :action="`${UPLOADURL}/upload`"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="form.directorAvatar" :src="form.directorAvatar" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="Submit">立即新增</el-button>
        <el-button>取消</el-button>
        </el-form-item>
        </el-form>
    </div>
</template>

<script>
import myaxios from '@/http/MyAxios.js'
import httpApi from '@/http/index.js'
    export default {
        data() {
            return {
              form:{
                directorName:'',
                directorAvatar:''
              },
               rules: {
         directorName: [
          { required: true, message: "导演姓名不能为空", trigger: "blur" }
        ],
         directorAvatar: [
          { required: true, message: "请选择一张头像", trigger: "blur" }
        ]
      }
            }
        },
        methods: {
            
            Submit(){
                this.$refs['form'].validate(valid=>{
                    if(valid){
                        httpApi.directorApi.add(this.form).then(res=>{
                            console.log('添加导演结果', res)
                            if(res.data.code==200){ // 成功
                            this.$message.success("恭喜，添加成功");
                            }else { // 失败
                            this.$message.error("添加失败，稍后重试");
                            }
                            // 重置表单
                           this.$refs['form'].resetFields()
                     })
                    }
                })
      
    },
            

           handleAvatarSuccess(res, file) {
        // this.imageUrl = URL.createObjectURL(file.raw);
            console.log(res)
            this.form.directorAvatar=res.data
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
        },
    }
</script>

<style lang="scss" scoped>
   .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  display: block;
}
</style>